<template>
	<scroll-view class="wanlshop-page-container" :style="{
			height: windowHeight + 'px'
		}" scroll-y enable-back-to-top enable-flex="true" @scrolltoupper="handleUpper" @scrolltolower="handleLower">
		<!-- 商家数据 -->
		<view v-if="shopData" class="wanlshop-shop-container__shop padding-sm radius-bock"
			@click="$wanlshop.to(`info?id=${shopData.id}`)">
			<view class="info">
				<view class="name text-cut text-bold">
					<block v-if="shopData.isself === 1">
						<view class="cu-tag radius sm bg-red">自营</view>
					</block>
					<block v-else>
						<view class="cu-tag radius sm wanl-bg-pink" v-if="shopData.state == 0">个人</view>
						<view class="cu-tag radius sm wanl-bg-blue" v-else-if="shopData.state == 1">企业</view>
						<view class="cu-tag radius sm wanl-bg-orange" v-else-if="shopData.state == 2">旗舰</view>
					</block>
					<text class="margin-left-xs"> {{shopData.shopname}} </text>
				</view>
				<view class="exponent text-min wanl-gray-dark">
					<view>
						<text class="margin-right-xs">店铺粉丝</text> {{shopData.find_user.fans}}
					</view>
				</view>
			</view>
			<view class="menu">
				<button v-if="shopData.isLive" class="cu-btn wlIcon wanl-bg-pink margin-right-sm" @click.stop="onLive(shopData.isLive.id)">
					<text class="wlIcon-icon_zhibo-mian text-bold"></text>
				</button>
				<button v-if="shopData.isFollow === 0" class="cu-btn radius-bock text-sm bg-white"
					@click.stop="handleFollow">
					<text class="wlIcon-31xuanze text-bold margin-right-xs"></text> 关注
				</button>
				<button v-else class="cu-btn radius-bock text-sm bg-white" @click.stop="handleFollow">
					<text class="wlIcon-31guanbi text-bold margin-right-xs"></text> 取关
				</button>
			</view>
		</view>
		<!-- 自定义首页 -->
		<!-- <view v-if="pageModules" :style="{
				paddingTop: headHeight + 'px', 
				backgroundColor : pageModules.page ? pageModules.page.style.pageBackgroundColor : '',
				backgroundImage : 'url(' + $wanlshop.oss(pageModules.page ? pageModules.page.style.pageBackgroundImage : '', 414, 0, 1, 'transparent', 'png') + ')',
				backgroundRepeat : pageModules.page ? pageModules.page.style.pageBackgroundRepeat : 'repeat',
				backgroundPosition: `0 ${headTop}px`
			}" style="background-size: 100% auto;"> -->
		<view v-if="pageModules" :style="{
				paddingTop: headHeight + 'px', 
				backgroundPosition: `0 ${headTop}px`
			}" style="background-size: 100% auto;">
			<view v-for="(item, index) in pageModules.item" :key="index">
				<wanl-page-banner v-if="item.type == 'banner'" :pageData="item" />
				<wanl-page-image v-if="item.type == 'image'" :pageData="item" />
				<wanl-page-advert-banner v-if="item.type == 'advertBanner'" :pageData="item" :advertData="adData.pageAdverts" />
				<wanl-page-advert-image v-if="item.type == 'advertImage'" :pageData="item" :advertData="adData.pageAdverts" />
				<wanl-page-video v-if="item.type == 'video'" :pageData="item" />
				<wanl-page-menu v-if="item.type == 'menu'" :pageData="item" />
				<wanl-page-notice v-if="item.type == 'notice'" :pageData="item" />
				<wanl-page-article v-if="item.type == 'article'" :pageData="item" />
				<wanl-page-headlines v-if="item.type == 'headlines'" :pageData="item" />
				<wanl-page-search v-if="item.type == 'search'" :pageData="item" :shopData="shopData"/>
				<wanl-page-activity v-if="item.type == 'activity'" :pageData="item" />
				<wanl-page-category-title v-if="item.type == 'categoryTitle'" :pageData="item" />
				<wanl-page-classify v-if="item.type == 'classify'" :pageData="item" />
				<!-- <wanl-page-likes v-if="item.type == 'likes'" :pageData="item" :lower="likesLower"/> -->
				<wanl-page-goods v-if="item.type == 'goods'" :pageData="item" />
				<wanl-page-groups v-if="item.type == 'groups'" :pageData="item" :shopData="shopData"/>
				<wanl-page-bargain v-if="item.type == 'bargain'" :pageData="item" />
				<wanl-page-seckill v-if="item.type == 'seckill'" :pageData="item" />
				<wanl-page-empty v-if="item.type == 'empty'" :pageData="item" />
				<wanl-page-division v-if="item.type == 'division'" :pageData="item" />
			</view>
			<!-- 百亿补贴banner -->
			<view class="baiyi">
				<view class="left">
					<view class="top">
						<view class="title">百亿补贴</view>
						<view class="subtitle">爆款限时狂补</view>
					</view>
					<view class="goods">
						<view class="item" v-for="(item,index) in good" :key="index" @tap="goGood(item.show_id)">
							<view class="img">
								<image :src="'https://dcdn.cxycoder.com'+item.image" mode="aspectFill"></image>
							</view>
							<view class="butie">已补{{item.discount_price}}元</view>
							<view class="price">￥{{item.data.price}}</view>
						</view>
					</view>
				</view>
				<view class="center"></view>
				<view class="right">
					<view class="top">
						<view class="title">今日疯抢</view>
						<view class="subtitle">低价天天抢</view>
					</view>
					<view class="goods">
						<view class="item" v-for="(item,index) in pintuan" :key="index" @tap="goPintuanGood(item.show_id)">
							<view class="img">
								<image :src="'https://dcdn.cxycoder.com'+item.image" mode="aspectFill"></image>
							</view>
							<view class="ping">
								<view class="price">￥{{item.data.price}}</view>
								<view class="text">拼</view>
							</view>
							<view class="yuanjia">￥{{item.discount_price}}</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 直播和剧场 -->
			<view class="zbandjc">
				<view class="left">
					<view class="top">
						<view class="title">乡村直播</view>
						<view class="l">
							<view class="img"></view>
							<text class="margin-right-xs">更多</text>
							<text class="wlIcon-fanhui2"></text>
						</view>
					</view>
					<view class="bottom">
						<view class="item" v-for="(item,index) in shop" :key="index" @tap="goShop(item.show_id)">
							<view class="img">
								<image :src="'https://dcdn.cxycoder.com'+item.image" mode="aspectFill"></image>
							</view>
							<view class="title">{{item.data.shopname}}</view>
						</view>
					</view>
				</view>
				<view class="right">
					<view class="top">
						<view class="title">热播剧场</view>
						<view class="l" @tap="goMoreVideo">
							<text class="margin-right-xs">更多</text>
							<text class="wlIcon-fanhui2"></text>
						</view>
					</view>
					<view class="bottom">
						<view class="item" v-for="(item,index) in short" :key="index" @tap="goVideo(item.show_id)">
							<view class="img">
								<image :src="'https://dcdn.cxycoder.com'+item.image" mode="aspectFill"></image>
							</view>
							<view class="title">{{item.data.name}}</view>
						</view>
					</view>
				</view>
			</view>
			
			<view v-for="(item, index) in pageModules.item" :key="index">				
				<wanl-page-likes v-if="item.type == 'likes'" :pageData="item" :lower="likesLower"/>
			</view>
			<!-- <uni-load-more status="noMore" :content-text="contentText" /> -->
			<view v-if="shopData" class="safeAreaBottom"> </view>
		</view>
		<wanl-empty v-else src="find_default3x" text="正在配置首页中..." />
	</scroll-view>
</template>

<script>
	export default {
		name: "WanlShopPage",
		props: {
			windowHeight: {
				type: Number,
				default: 0
			},
			headHeight: {
				type: Number,
				default: 0
			},
			headTop: {
				type: Number,
				default: 0
			},
			shopData: {
				type: Object,
				default () {}
			},
			pageModules: {
				type: Object,
				default () {}
			},
			adData: {
				type: Object,
				default () {}
			}
		},
		data() {
			return {
				likesLower: 0,
				contentText: {
					contentdown: '下拉加载更多',
					contentrefresh: '加载中',
					contentnomore: '我是有底线的'
				},
				good:[],
				pintuan:[],
				shop:[],
				short:[]
			}
		},
		mounted() {
			this.getActity();
		},
		methods: {
			goGood(id){
				uni.navigateTo({
					url:'/pages/product/goods?id='+id
				})
			},
			goPintuanGood(id){
				uni.navigateTo({
					url:'/pages/apps/groups/goods?id='+id
				})
			},
			goShop(id){
				uni.navigateTo({
					url:'/pages/shop/index?id='+id
				})
			},
			goVideo(id){
				uni.navigateTo({
					url:'/pages/movie/show?id='+id
				})
			},
			goMoreVideo(){
				uni.switchTab({
					url:'/pages/movie'
				})
			},
			async getActity(){
				await uni.request({
					url: '/wanlshop/activity/list',
					data: {
						
					},
					success: res => {
						this.good = res.data.good;
						this.pintuan = res.data.pintuan;
						this.shop = res.data.shop;
						this.short = res.data.short;
					}
				});
				
			},
			handleFollow() {
				this.$emit('handleHandleFollow')
			},
			// 上拉刷新
			handleUpper(e) {},
			// 下拉加载
			handleLower(e) {
				console.log('e', e);
				this.likesLower = e.timeStamp
			}
		}
	}
</script>

<style lang="scss">
	.zbandjc{
		width: 700rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: 0 auto;
		margin-top: 20rpx;
		.left{
			background: url(https://dcdn.cxycoder.com/home/home_left.png);
		}
		.right{
			background: url(https://dcdn.cxycoder.com/home/home_right.png);
			.l{
				color: #999999;
			}
		}
		.left,.right{
			background-size: 100%;
			background-repeat: no-repeat;
			width: 335rpx;
			height: 280rpx;
			padding: 20rpx;
			.top{
				display: flex;
				align-items: center;
				justify-content: space-between;
				.title{
					font-weight: 600;
					font-size: 28rpx;
					color: #000000;
				}
				.l{
					display: flex;
					align-items: center;
					justify-content: space-between;
					font-size: 24rpx;
					color: #51B35D;
					.img{
						background: url(https://dcdn.cxycoder.com/home/zbtips.png);
						background-size: 100%;
						background-repeat: no-repeat;
						width: 26rpx;
						height: 26rpx;
						background-size: 100%;
						background-repeat: no-repeat;
						
					}
				}
			}
			.bottom{
				display: flex;
				align-items: center;
				justify-content: space-between;
				box-sizing: border-box;
				margin-top: 15rpx;
				.item{
					position: relative;
					.img{
						width: 142rpx;
						height: 180rpx;
						image{
							width: 100%;
							height: 100%;
							border-radius: 10rpx;
						}
					}
					.title{
						line-height: 44rpx;
						font-size: 22rpx;
						box-sizing: border-box;
						padding-left: 10rpx;
						position: absolute;
						left: 0rpx;
						bottom: 0rpx;
						width: 142rpx;
						height: 44rpx;
						background: linear-gradient( 180deg, rgba(0,0,0,0) 0%, #000000 100%);
						color: white;
						border-bottom-right-radius: 10rpx;
						border-bottom-left-radius: 10rpx;
					}
				}
			}
		}
	}
	.baiyi{
		width: 700rpx;
		height: 250rpx;
		background: url(https://dcdn.cxycoder.com/home/bannerbg.png);
		background-size: 100%;
		background-repeat: no-repeat;
		margin: 0 auto;
		display: flex;
		align-items: center;
		justify-content: space-around;
		border-radius: 15rpx;
		.center{
			width: 1rpx;;
			height: 231rpx;
			background: url(https://dcdn.cxycoder.com/home/line2.png);
			background-size: 100%;
			background-repeat: no-repeat;
		}
		.left{
			.butie{
				width: 140rpx;
				height: 34rpx;
				line-height: 34rpx;
				text-align: center;
				color: white;
				background: #EB612A;
				border-radius: 17rpx;
				font-size: 20rpx;
			}
			.price{
				font-weight: 600;
				font-size: 30rpx;
				color: #EB612A;
				margin-top: 8rpx;
			}
		}
		.right{
			.yuanjia{
				font-weight: 400;
				font-size: 30rpx;
				color: #999999;
				line-height: 0rpx;
				text-align: left;
				font-style: normal;
				text-decoration-line: line-through;
				text-transform: none;
				margin-top: 25rpx;
			}
			.ping{
				width: 140rpx;
				height: 34rpx;
				background: url(https://dcdn.cxycoder.com/home/pingbg.png);
				background-size: 100%;
				background-repeat: no-repeat;
				display: flex;
				align-items: center;
				justify-content: space-around;
				
				.price{
					font-weight: bold;
					font-size: 24rpx;
					color: #FF9900;
				}
				.text{
					font-weight: bold;
					font-size: 24rpx;
					color: #FFFFFF;
				}
				
			}
		}
		.left,.right{
			width: 340rpx;
			height: 240rpx;
			box-sizing: border-box;
			padding: 20rpx;
			
			.top{
				display: flex;
				align-items: center;
				.title{
					font-weight: 600;
					font-size: 28rpx;
					color: #000000;
				}
				.subtitle{
					width: 146rpx;
					height: 36rpx;
					background: #F7AC3C;
					font-size: 22rpx;
					color: #FFFFFF;
					text-align: center;
					line-height: 36rpx;
					margin-left: 10rpx;
					border-radius: 15rpx;
					border-bottom-left-radius: 0rpx;
				}
			}
			.goods{
				display: flex;
				align-items: center;
				justify-content: space-around;
				.item{
					display: flex;
					flex-direction: column;
					align-items: center;
					.img{
						width: 100rpx;
						height: 100rpx;
						image{
							width: 100%;
							height: 100%;
						}
					}
				}
			}
		}
	}
	.wanlshop-shop-container {
		&__shop {
			display: flex;
			align-items: center;
			justify-content: space-between;
			background-color: rgba(0, 0, 0, .05);
			margin: 0 16rpx 16rpx 16rpx;

			.info {
				width: calc(100% - 260rpx);
				display: flex;
				align-content: space-between;
				flex-wrap: wrap;
				height: 85rpx;
				.name{
					width: 90%;
				}
				.exponent{
					display: flex;
				}
			}

			.menu {
				text-align: right;
				width: 260rpx;
			}
		}
	}
</style>